<template>
  <div class="wrapper">
    <div class="box">
      <VirtualList :size="30" :remain="8" :items="items">
        <Item slot-scope="{ item, size }" :item="item" :size="size"></Item>
      </VirtualList>
    </div>
    <div class="action">
      <div class="btn" @click="test">测试</div>
    </div>
  </div>
</template>

<script>
import VirtualList from '@/components/001-virtual-list/index.vue'
import Item from '@/components/001-virtual-list/item.vue'
import dayjs from 'dayjs'
console.log('当前系统时间：', dayjs().format('YYYY-MM-DD HH:mm:ss'))

let items = []
for (let i = 0; i < 10000; i++) {
  items.push({
    id: i,
    value: i
  })
}
export default {
  components: {
    VirtualList,
    Item
  },
  props: {},
  data() {
    return {
      items: items
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    test() {}
  },
  filters: {}
}
</script>
<style scoped lang="scss">
@mixin oneline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrapper {
  height: 100%;
  position: relative;
}
</style>
